<template>
 <div class="add_award" >
     <div class="theme">
     <mt-field  placeholder="请输入奖励主题" v-model="sentData.theme" ></mt-field>
     </div>
     <p>步骤1､系统支持</p>
    
     <div>

      <div class="way white" >
               <el-select v-model="sentData.Condition" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
             </div>
         <mt-field  placeholder="请输入人数" v-model="sentData.PeopleNumber" type="TotalNumber"></mt-field>
     </div>
 
<p>步骤2､奖品设置</p>
<div>
    <mt-field  placeholder="请输入每位获奖者可获得的奖品及数量" v-model="sentData.Detail" ></mt-field>
   
     <mt-field  placeholder="请输入奖品总数，留空为不限数量" v-model="sentData.TotalNumber" type="number" ></mt-field>
</div>
<p>步骤3､满足条件的用户数量大于奖品总数时</p>
 <div class="condition">
   <mt-radio
  v-model="sentData.RewardMethod" 
  :options="['按时间先满足条件者获得奖品', '在活动开始时自动抽取获奖者', '手动抽取获奖者','在活动结束时自动抽取获奖者']">
</mt-radio>
 </div>

    <div class="preview white">
      <div class="title">
        奖励公告预览
      </div>
      <div class="inner">
        <div v-if="sentData.Condition==''">
         
        </div>
        <div v-else-if="sentData.Condition === '选项1'">
            前{{sentData.PeopleNumber}}位报名者  
        </div>
        <div v-else-if="sentData.Condition === '选项2'">
            个人分享给好友报名数量达到{{sentData.PeopleNumber}}人
        </div>
        即有机会获得{{sentData.Detail}} 共{{sentData.TotalNumber}}个获奖名额，
        <div>{{sentData.RewardMethod}}</div>
      </div>
    </div>
    <footer>
    <div class="left"  v-on:click="submit,home">
       <div class="iconfont icon-kefu" ></div>
       <div class="word">取消</div>
    </div>
    
    <div class="right" v-on:click="submit">
      <div class="iconfont icon-baoming1" ></div>
      <div class="word">提交</div>
    </div>
  </footer>

 </div>

</template>
<script>

 
      
  export default{
  
   
    created(){

      const rewardRuleInit= {
    "PeopleNumber": '',
    "Condition": '',
    "Detail": '',
    "TotalNumber": '',
    "RewardMethod": '',
    "theme":'',
  }

       this.sentData=rewardRuleInit;
         
       

    },

   data() {
      return {
        
        options: [{
          value: '选项1',
          label: '报名'
        }, {
          value: '选项2',
          label: '要约'
        }],
        value: '', 
       
        sentData:'',
      
        
      }
    },


   methods:{
       
       submit(){

         let what=['按时间先满足条件者获得奖品', '在活动开始时自动抽取获奖者', '手动抽取获奖者','在活动结束时自动抽取获奖者']
         let ConditionNumber='';
         for (var index = 0; index < what.length; index++) {
           if(this.sentData.RewardMethod==what[index]){
             this.sentData.RewardMethod=index;
           }
         }
          console.log(this.sentData)
          let transfer=JSON.parse(sessionStorage.PublishInit);

            transfer.rewardRule.push(this.sentData)
            

             sessionStorage.PublishInit=JSON.stringify(transfer);

             console.log(sessionStorage.PublishInit)
               this.$router.push({ path: '/event_publish' })
         
       },
    
    
   }
  }
</script>
<style scoped lang="stylus">

.white
  background #fff
.add_award
  padding-bottom 70px
  p
    font-size 13px
    margin-top 13px
    margin-bottom 4px
    margin-left 15px
.way
    height 40px
    font-size 15px
    padding-left 5px
    line-height 40px    
        
footer
    display flex
    position fixed
    bottom 0
    width 100%
    height 50px
   
    .left
      flex 2
      background-color  #E5E5E5
      display flex
      justify-content center
      align-items center
      .word
        font-size 12px
        text-align center
        color: #333333;
    .right
      flex 3
      background-color #2A96F5
      display flex
      align-items center
      display flex
      justify-content center
      align-items center
      .word
        font-size 12px
        text-align center
        color: #ffffff;
  .preview
    margin 25px 12px
    padding-bottom 15px  
    .title 
      color #2A96F5
      font-size 15px
      text-align center
      padding 12px 0
    .inner
      text-align center
      font-size 15px
</style>
<style  lang="stylus">
    .add_award
      a
        min-height 40px
        .mint-cell-wrapper
            padding-left 15px
            background-origin:padding-box !important
        input
            font-size 15px !important
    .el-select
        width 100%
    .el-input__inner
        border none
    .mint-checkbox-core
      width 14px
      height 14px
      // background-color #00C9C2
      // border-color: #00C9C2;
    .mint-checkbox-core::after
      top: 2px;
      left: 4px
      width: 2px;
      height: 5px;
    .mint-checkbox-input:checked + .mint-checkbox-core
      background-color #00C9C2
      border-color #00C9C2
    .mint-checklist-label
      padding 0 0
    .condition
      .mint-checkbox-label
        font-size 15px
        display: inline-block;
        margin-top: 2px;
      .mint-checkbox
        margin-bottom 2px
    .el-select-dropdown
        top 70px !important
        
</style>


